import React from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Button } from 'antd'
import styles from './Search.styl'

const { Item: FormItem } = Form

class Search extends React.Component {
    static defaultProps = {
        onSearch: () => {},
        fields: [],
    }

    static propTypes = {
        onSearch: PropTypes.func,
        fields: PropTypes.array,
    }

    state={}

    componentDidMount() {}

    search = () => {
        const { form: { getFieldsValue }, onSearch } = this.props
        const params = getFieldsValue()
        onSearch(params)
    }

    resetForm = () => {
        const { form: { resetFields }, onSearch } = this.props
        resetFields()
        onSearch()
    }

    render() {
        const {
            form: { getFieldDecorator },
            fields,
        } = this.props
        return (
            <Form className={styles.form}>
                <div className={styles.form_fields}>
                    {fields.map(({ cols = [], style = {} }, index) => (
                        <Row key={index} className={styles['form-row']} style={style}>
                            {cols.map(([field, name, span, child, spanStyle = {}]) => (
                                <Col key={field} span={span} className={styles['form-item']}>
                                    <span className={styles['form-item__label']} style={spanStyle}>{name}：</span>
                                    <FormItem className={styles['form-item__input']}>
                                        {getFieldDecorator(field)(child)}
                                    </FormItem>
                                </Col>
                            ))}
                        </Row>
                    ))}
                </div>
                <div className={styles.form_buttons}>
                    <Button className={`${styles.search} btn-search`} type="primary" onClick={this.search}>查询</Button>
                    <Button className={`${styles.search} btn-search`} onClick={this.resetForm}>重置</Button>
                </div>
            </Form>
        )
    }
}

export default Form.create()(Search)
